<template>
  <div class="refil-card">
    <div v-for="(i, ind) in cradList" :key="ind" v-permission="[90301, i.id]" class="refil-card-box" @click="onCrad(i)">
      <h4>{{ i.title }}</h4>
      <p>{{ i.describe }}</p>
      <p v-if="i.introduce">{{ i.introduce }}</p>
    </div>
    <crad-operate ref="cradOperate" />
  </div>
</template>

<script>
  import CradOperate from './components/CradOperate'
  export default {
    name: 'refil-card',
    components: {
      CradOperate
    },
    data() {
      return {
        cradList: [
          { title: '开通月结', id: 1, describe: '您可以给用户设置授信额度' },
          { title: '额度调整', id: 2, describe: '您可以给用户调整授信额度' },
          { title: '关闭月结', id: 3, describe: '您可以给用户关闭月结功能使用' },
          // { title: '挂失/冻结', id: 3, describe: '您可以使用此功能挂失遗失的充值卡或冻结，充值卡，冻结期间充值卡所有功能不可使用' },
          // { title: '换卡', id: 4, describe: '您可以使用此功能将旧充值卡更换为新充值卡' },
          // { title: '销卡', id: 5, describe: '您可以使用此功能将充值卡注销，注销后该卡号永久作废' },
          { title: '手机号变更', id: 4, describe: '您可以使用此功能对月结用户的手机号进行修改，非常规操作，请谨慎' }
          // { title: '卡密码修改', id: 7, describe: '您可以使用原密码为充值卡更改新密码' },
          // { title: '卡密码重置', id: 8, describe: '您可以使用此功能将充值卡密码直接', introduce: '重置为初始密码：888888' },
          // { title: '调账冲正', id: 9, describe: '您可以使用财务权限为充值卡，调整卡内金额，慎重操作' },
          // { title: '自动充值', id: 10, describe: '您可以在此调整绑定银行预留信息，完成自动充值入账调整卡内金额，慎重操作' }
        ]
      }
    },
    async mounted() {
    },
    methods: {
      onCrad(i) {
        this.$refs.cradOperate.cradType = i.id
        this.$refs.cradOperate.title = i.title
        this.$refs.cradOperate.visible = true
        // switch (i.id) {
        // case 0:
        //   this.$refs.cradOperate.cradType = i.id
        //   this.$refs.cradOperate.title = i.title
        //   this.$refs.cradOperate.visible = true
        //   break
        // case 1:// 不显示验证码
        // case 9:// 不显示验证码
        // case 10:// 不显示验证码
        //   this.$refs.cradOperate.cradType = i.id
        //   this.$refs.cradOperate.title = i.title
        //   this.$refs.cradOperate.visible = true
        //   break
        // default:// 显示验证码
        //   this.$refs.cradOperate.cradType = i.id
        //   this.$refs.cradOperate.title = i.title
        //   this.$refs.cradOperate.visible = true
        // }
      }
    }
  }
</script>

<style lang="scss" scoped>
.refil-card {
  display: flex;
  // justify-content: space-between;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  margin-left: 10px;
  overflow: auto;
  flex-wrap: wrap;
  .form {
    display: flex;
    flex-wrap: wrap;
    & /deep/ .el-form-item {
      width: 65%;
      padding-right: 10px;
      .el-form-item__content > .el-select {
        width: 100%;
      }
    }
    .block {
      width: 100%;
    }
  }
  &-box {
    width: 278px;
    height: 156px;
    padding: 31px 21px 0 21px;
    margin-right: 21px;
    margin-bottom: 20px;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    background: #eceef7;
    background-image: url('../../../assets/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 6px;
    h4 {
      padding: 0;
      margin: 0;
      margin-bottom: 12px;
      font-size: 32px;
      color: #333;
    }
    p {
      // display: -webkit-box; // eslint-disable-line
      overflow: hidden;
      font-family: PingFang SC, PingFang SC-Bold;
      font-size: 14px;
      font-weight: 700;
      line-height: 22px;
      color: #666;
      text-overflow: ellipsis;
      // -webkit-box-orient: vertical; // eslint-disable-line
      // -webkit-line-clamp: 2; // eslint-disable-line
    }
  }
  &-box:hover {
    font-family: PingFang SC, PingFang SC-Bold;
    font-size: 32px;
    font-weight: 700;
    cursor: pointer;
    background: #01999f;
    background-image: url('../../../assets/hBg.jpg');
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    h4 {
      color: #fff;
    }
    p {
      font-family: PingFang SC, PingFang SC-Bold;
      font-size: 14px;
      font-weight: 700;
      line-height: 22px;
      color: #fff;
    }
  }
  /deep/.el-form-item__content {
    display: flex;
    align-items: center;
  }
}
</style>
